<template>
	<uni-nav-bar title="我的绑定邀新保障额度客户列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale" style="padding: 10px 0px;margin-bottom:10rpx;">
		<view class="space-between">
			<view class="datas">
				<uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false"
					rangeSeparator="至" @change="change" />
			</view>
			<view class="center select-picker" @click="changeMoney()">{{typesOf}}
				<uni-icons type="bottom" size="20" style="margin-left:5rpx;"></uni-icons>
			</view>
		</view>
		<view style="margin-left: 15rpx;font-size: 24rpx;color:#666;">
			<view>邀新保障额度客户:{{driver_count}}</view>
			<view style="margin:5rpx 0px;">邀新保障额度累计发放:{{release}}</view>
			<view>邀新保障累计余额:{{money}}</view>
		</view>
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package_sale" v-for="item in orderLists" :key="item.id">
			<view>
				<view class="center">
					<image :src="item.driver_avatar" mode=""></image>
					<text>{{item.driver_name}}</text>
					<uni-icons :type="show==item.id?'bottom':'top'" size="20" style="margin-left: 10rpx;"
						@click="tabChange(item.id)" v-if="item.childs_list&&item.childs_list.length>0"></uni-icons>
				</view>
				<view class="space-between list">
					<view>邀新保障额度：{{item.count}}</view>
					<view>累计发放：{{item.release}}</view>
					<view>邀新保障余额：{{item.money}}</view>
				</view>
				<view class="list">
					<view>{{item.createtime}}</view>
				</view>
			</view>
			<view style="width:95%;margin:20rpx 0px 0px 5%" v-for="items in item.childs_list" :key="items.id"
				:style="{display:show==item.id?'block':'none'}">
				<view class="center">
					<image :src="items.driver_avatar" mode=""></image>
					<text>{{items.driver_name}}</text>
				</view>
				<view class="space-between list">
					<view>邀新保障额度：{{items.count}}</view>
					<view>累计发放：{{items.release}}</view>
					<view>邀新保障余额：{{items.money}}</view>
				</view>
				<view class="list">
					<view>{{items.createtime}}</view>
				</view>
			</view>
		</view>
		<Popu v-if="orderLists.length<1" :pageHeight="pageHeight" text="暂无我的绑定邀新保障额度客户"></Popu>
	</scroll-view>
	<!-- 邀新保障余额弹框 -->
	<Screenpop ref="moneyPop" @confirm="confirm"></Screenpop>
</template>


<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import Screenpop from '@c/earthPushing/bullet-box/screenpop.vue';
	import { getStaffDriverList } from '@/gql/earthPushing/teamJoin';
	import { showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { ref } from 'vue';
	import { getDriverID } from '@/stores/driverID';
	import { format, subDays } from 'date-fns';
	const staff_id = getDriverID();
	let now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	let daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);
	const typesOf = ref('筛选')
	const moneyPop = ref(null)
	const orderLists = ref([]);
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const pageHeight = ref();
	const min = ref()
	const max = ref()
	const driver_count = ref(0)
	const money = ref(0)
	const release = ref(0)
	const show = ref()
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 168;
		},
	});
	init()
	function init() {
		showLoading()
		isLoading.value = true;
		const payload = {
			query: getStaffDriverList,
			variables: {
				page: currentPage.value,
				staff_id,
				min: min.value,
				max: max.value,
				start,
				end,
			},
		};
		toPublish(
			'ql/staff/getStaffDriverList',
			payload,
			(obj : any) => {
				const { getStaffDriverList } = obj.data;
				isLoading.value = false;
				orderLists.value = [...orderLists.value, ...getStaffDriverList.list];
				lastPage.value = getStaffDriverList.lastpage;
				driver_count.value = getStaffDriverList.driver_count
				money.value = getStaffDriverList.money
				release.value = getStaffDriverList.release
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			init();
		}
	}
	function confirm(mins : number, maxs : number,) {
		console.log(mins, maxs)
		if (!mins) {
			typesOf.value='筛选'
			currentPage.value = 1
			orderLists.value = []
			init()
			return
		}
		typesOf.value = mins + '~' + maxs
		min.value = Number(mins)
		max.value = Number(maxs)
		currentPage.value = 1
		orderLists.value = []
		init()

	}
	function changeMoney() {
		moneyPop.value.open()
	}
	/**
	 * 时间筛选
	 * @param sta  开始时间
	 * @param en  结束时间
	 */
	function change([sta, en]) {
		start = sta;
		end = en;
		currentPage.value = 1
		orderLists.value = []
		init()
	}
	function tabChange(id : number) {
		if (show.value == id) {
			show.value = ''
		} else {
			show.value = id
		}
	}
</script>

<style scoped lang="less">
	.package_sale {
		margin: 0px;
		border-bottom: 1px solid #eee;
	}

	.list {
		width: 95%;
		flex-wrap: wrap;
		margin: 10rpx 0px 0px 5%;

		view:nth-of-type(2) {
			text-align: right;
		}

		view {
			width: 50%;
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #666666;
		}
	}

	image {
		width: 66rpx;
		height: 66rpx;
		background: #EAEAEA;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.select-picker {
		justify-content: flex-end;
		font-size: 30rpx;
		width: 200rpx;
	}
</style>
<style>
	.datas>>>.uni-date__x-input {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-date-x {
		font-size: 32rpx !important;
	}

	.datas>>>.uni-icons {
		font-size: 48rpx !important;
	}

	.datas>>>.uni-date-x {
		padding: 0px 0px 0px 10rpx;
	}

	.datas>>>.select-picker {
		justify-content: flex-end;
		width: 200rpx;
	}

	.datas>>>.select-picker {
		font-size: 26rpx;
	}
</style>